<template>
  <view class="page-content">
    <y-step
      :infoList="list"
      :current="1"
      direction="column"
      v-if="list.length !== 0"
    >
      <template #card="{ data }">
        <view>
          <text class="u-font-28 u-m-b-10 font-bold">{{ data.taskName }}</text>
          <view class="u-flex u-row-between">
            <text class="u-font-24 u-tips-color"
              >完成时间：{{
                data.completedTime ? data.completedTime.split(' ')[0] : ''
              }}</text
            >
            <u-tag
              shape="circle"
              border-color="transparent"
              :text="
                isFinance(data.taskType)
                  ? TASK_STATUS_TYPES_MAP[data.taskStatus].label?.replace(
                      '待反馈',
                      '待提交'
                    )
                  : TASK_STATUS_TYPES_MAP[data.taskStatus].label
              "
              :type="TASK_STATUS_TYPES_MAP[data.taskStatus].color"
            ></u-tag>
          </view>
        </view>
      </template>
    </y-step>
    <view class="empty">
      <u-empty text="暂无数据" mode="data" v-if="list.length === 0"></u-empty>
    </view>
  </view>
</template>
<script lang="ts" setup>
import yStep from '@/components/Y-Steps/Y-steps.vue';
import { getMilestoneTaskList } from '@/api/modules/project';
import { TASK_STATUS_TYPES_MAP } from '../../work/index';
import { dataFormat } from '@/utils/tools';

const props = defineProps<{
  projectInfo: any;
}>();
const { projectInfo } = toRefs(props);
const list = ref<any[]>([]);
const getList = () => {
  const params = {
    projectId: projectInfo.value.projectId,
  };
  getMilestoneTaskList(params).then((res: any) => {
    list.value = res.map((item: any) => {
      return Object.assign(
        { color: 'bg-' + TASK_STATUS_TYPES_MAP[item.taskStatus].color },
        item
      );
    });
  });
};
getList();

const isFinance = (status: number) => {
  return [8, 10, 14].includes(status);
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 20rpx;
}
.empty {
  padding-top: 40rpx;
}
</style>
